<<<<<<< HEAD
/*
 *@description: 产品管理
 *@Author:@reynold
 *@Date:2025-03-22 11:06:38
 *@Update:2025-03-22 11:06:38
 *@Version: V1.0.0
*/
<template>
  <Card>
    <div>
      <div class="header">
        <div class="header_box"><el-button size="mini" @click="addproduct">添加</el-button></div>
        <div class="header_box"><el-input v-model="bindName" size="mini" placeholder="请输入名称"></el-input></div>
        <div class="header_box">
          <el-select v-model="bindStatus" size="mini" clearable placeholder="请选择状态">
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <!-- 选择栏目 -->
        <div class="header_box">
          <el-select v-model="bindIncluds" size="mini" clearable placeholder="请选择栏目">
            <el-option
              v-for="item in includsList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="header_box"><el-button size="mini" @click="inquire">查询</el-button></div>
      </div>
      <div class="table">
        <el-table
          :data="productList"
          style="width: 100%">
          <el-table-column type="index" :index="initIndex()" label="序号" width="100"></el-table-column>
          <el-table-column
            prop="productNum"
            label="产品编号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称">
          </el-table-column>
          <el-table-column
            label="图片">
            <template slot-scope="scope">
              <img :src="scope.row.image" />
            </template>
          </el-table-column>
          <el-table-column
            prop="price"
            label="价格">
          </el-table-column>
          <el-table-column
            label="状态">
            <template slot-scope="scope">
              <el-tag type="success" size="mini" effect="dark" v-if="scope.row.status == '正常'">正常</el-tag>
              <el-tag type="warning" size="mini" effect="dark" v-else>下架</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="include"
            label="所属栏目">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button class="columnBtn1" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
              <el-button v-if="scope.row.status == '正常'" class="columnBtn2" type="text" size="small" @click="takeDown(scope.row)">下架</el-button>
              <el-button v-else class="columnBtn3" type="text" size="small" @click="updateProduct(scope.row)">上架</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageQuery.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>

      <!-- 抽屉 -->
      <el-drawer
          :title="title"
          :visible.sync="drawer">
          <div class="demo-drawer__content">
            <el-form :model="drawerForm">
              <el-form-item label="产品编号" :label-width="formLabelWidth">
                <el-input v-model="drawerForm.productNum" disabled autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="名称" :label-width="formLabelWidth">
                <el-input v-model="drawerForm.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="价格" :label-width="formLabelWidth">
                <el-input v-model="drawerForm.price" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="状态" :label-width="formLabelWidth">
                <el-select v-model="drawerForm.status">
                  <el-option
                    v-for="item in statusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="所属栏目" :label-width="formLabelWidth">
                <el-select v-model="drawerForm.include">
                  <el-option
                    v-for="item in includsList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div class="demo-drawer__footer">
              <el-button @click="cancelForm">取 消</el-button>
              <el-button type="primary" @click="handlesubmit" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
            </div>
          </div>
      </el-drawer>
    </div>
  </Card>
</template>

<script>
import Card from '@/components/Card/index.vue'
import instance from '@/utils/instance.js'
import utils from '@/utils/utils.js'
export default {
  data(){
    return{
      // 抽屉
      title:'',
      drawer:false,
      drawerForm:{},
      formLabelWidth: '100px',
      loading:false,
      // 搜索用的名称
      bindName:'',
      bindStatus:'',
      bindIncluds:'',
      statusList:[
        {value:'正常',label:'正常'},
        {value:'下架',label:'下架'},
      ],
      includsList:[],
      productList:[],
      pageQuery:{
        pageNum:1,
        pageSize:10
      },
      total:100
    }
  },
  methods:{
    // 初始序号
    initIndex(){
      return (this.pageQuery.pageNum - 1) * this.pageQuery.pageSize + 1
    },
    // 获取所有栏目
    getAllIncluds(){
      instance.get('/product').then(res=>{
        this.includsList = res.data.data
      }).catch(err=>{})
    },
    // 分页获取所有产品数据
    getProductList(){
      let params = {
        pageNum:this.pageQuery.pageNum,
        pageSize:this.pageQuery.pageSize,
        name:this.bindName?this.bindName:'',
        status:this.bindStatus?this.bindStatus:'',
        include:this.bindIncluds?this.bindIncluds:''
      }
      instance.post('/product/list',params).then(res=>{
        console.log(res);
        this.productList = res.data.data
        this.total = res.data.total
      })
    },
    // 按条件查询
    inquire(){
      this.getProductList()
    },

    // 下架产品
    takeDown(scope){
      instance.post('/product/tackdown',scope.id).then(res=>{
        utils.showSuccess(res.data.message)
        this.getProductList()
      })
    },
    // 上架产品
    updateProduct(scope){
      instance.post('/product/update',scope.id).then(res=>{
        utils.showSuccess(res.data.message)
        this.getProductList()
      })
    },
    // 点击编辑打开抽屉
    edit(scope){
      this.title = '编辑产品'
      this.drawerForm = scope
      this.drawer = true
    },
    // 发送编辑产品列表
    handlesubmit(){
      if(this.title == '编辑产品'){
        this.loading = true
        instance.post('/product/edit',this.drawerForm).then(res=>{
          utils.showSuccess(res.data.message)
          this.getProductList()
          this.drawer = false
          this.loading = false
        })
      }else{
        this.loading = true
        instance.post('/product/addproduct',this.drawerForm).then(res=>{
          utils.showSuccess(res.data.message)
          this.getProductList()
          this.drawer = false
          this.loading = false
        })
      }
    },

    // 取消抽屉
    cancelForm(){
      this.drawer = false
    },
    
    // 添加产品
    addproduct(){
      this.title = '添加产品'
      this.drawerForm = {}
      this.drawer = true
    },

    handleSizeChange(val) {
      this.pageQuery.pageSize = val
      this.getProductList()
    },
    handleCurrentChange(val) {
      this.pageQuery.pageNum = val
      this.getProductList()
    }
  },
  components:{
    Card
  },
  created(){
    this.getAllIncluds()
    this.getProductList()
  }
}
</script>

<style lang="less" scoped>
.header{
  display: flex;
  .header_box{
    margin-right: 5px;
    .el-button--mini{
      background-color: #188b8f;
      color: #fff;
    }
  }
}
.demo-drawer__content{
  form{
    height: 80vh;
  }
  .demo-drawer__footer{
    float: right;
    margin-right: 15px;
  }
=======
<template>
  <div class="container">
    <div class="header">
      <el-button type="primary" @click="handleAdd">添加</el-button>
      <el-input
        v-model="searchName"
        placeholder="请输入名称"
        style="width: 200px; margin-left: 10px"
      ></el-input>
      <el-select v-model="searchStatus" placeholder="请选择状态" style="margin-left: 10px; width: 120px">
        <el-option label="全部" value=""></el-option>
        <el-option label="上架" value="1"></el-option>
        <el-option label="下架" value="0"></el-option>
      </el-select>
      <el-select v-model="searchCategory" placeholder="请选择栏目" style="margin-left: 10px; width: 120px">
        <el-option label="全部" value=""></el-option>
        <el-option label="家居清洁" value="1"></el-option>
        <el-option label="家电维修" value="2"></el-option>
        <el-option label="保姆服务" value="3"></el-option>
        <el-option label="月嫂服务" value="4"></el-option>
      </el-select>
      <el-button type="primary" @click="handleSearch" style="margin-left: 10px">查询</el-button>
    </div>
    
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :header-cell-style="{ background: '#f5f7fa', color: '#333' }"
    >
      <el-table-column prop="index" label="序号" width="100"></el-table-column>
      <el-table-column prop="productCode" label="产品编号" width="180"></el-table-column>
      <el-table-column prop="name" label="名称" width="180"></el-table-column>
      <el-table-column label="图片" width="100">
        <template slot-scope="scope">
          <img :src="scope.row.image" style="width: 40px; height: 40px;" />
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格" width="100"></el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === '1'" type="success">上架</el-tag>
          <el-tag v-else type="info">下架</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="所属栏目" width="180">
        <template slot-scope="scope">
          {{ getCategoryName(scope.row.category) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <!-- 添加对话框 -->
    <el-dialog title="添加产品" :visible.sync="addDialogVisible" width="40%">
      <el-form :model="addForm" ref="addForm" label-width="100px">
        <el-form-item label="产品编号">
          <el-input v-model="addForm.productCode"></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            class="upload-demo"
            drag
            action=""
            :auto-upload="false"
            :on-change="handleImageChange"
            :show-file-list="false"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-form-item>
        <el-form-item label="价格">
          <el-input-number v-model="addForm.price" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="addForm.status">
            <el-option label="上架" value="1"></el-option>
            <el-option label="下架" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属栏目">
          <el-select v-model="addForm.category">
            <el-option label="家居清洁" value="1"></el-option>
            <el-option label="家电维修" value="2"></el-option>
            <el-option label="保姆服务" value="3"></el-option>
            <el-option label="月嫂服务" value="4"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmAdd">确定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑对话框 -->
    <el-dialog title="编辑产品" :visible.sync="editDialogVisible" width="40%">
      <el-form :model="editForm" ref="editForm" label-width="100px">
        <el-form-item label="产品编号">
          <el-input v-model="editForm.productCode"></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            class="upload-demo"
            drag
            action=""
            :auto-upload="false"
            :on-change="handleImageChange"
            :show-file-list="false"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-form-item>
        <el-form-item label="价格">
          <el-input-number v-model="editForm.price" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="editForm.status">
            <el-option label="上架" value="1"></el-option>
            <el-option label="下架" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属栏目">
          <el-select v-model="editForm.category">
            <el-option label="家居清洁" value="1"></el-option>
            <el-option label="家电维修" value="2"></el-option>
            <el-option label="保姆服务" value="3"></el-option>
            <el-option label="月嫂服务" value="4"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmEdit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      addDialogVisible: false,
      editDialogVisible: false,
      searchName: '',
      searchStatus: '',
      searchCategory: '',
      addForm: {
        productCode: '',
        name: '',
        image: '',
        price: 0,
        status: '1',
        category: '1'
      },
      editForm: {
        index: null,
        productCode: '',
        name: '',
        image: '',
        price: 0,
        status: '1',
        category: '1'
      }
    };
  },
  methods: {
    getCategoryName(categoryId) {
      const categoryMap = {
        '1': '家居清洁',
        '2': '家电维修',
        '3': '保姆服务',
        '4': '月嫂服务'
      };
      return categoryMap[categoryId] || '未知';
    },
    loadData() {
      // 从 localStorage 加载数据
      const savedData = localStorage.getItem('productData');
      if (savedData) {
        this.tableData = JSON.parse(savedData);
      } else {
        // 默认数据
        this.tableData = [
          {
            index: 1,
            productCode: "P001",
            name: "家居清洁服务",
            image: "https://via.placeholder.com/40",
            price: 100,
            status: "1",
            category: "1"
          },
          {
            index: 2,
            productCode: "P002",
            name: "家电维修服务",
            image: "https://via.placeholder.com/40",
            price: 200,
            status: "1",
            category: "2"
          },
          {
            index: 3,
            productCode: "P003",
            name: "保姆服务",
            image: "https://via.placeholder.com/40",
            price: 300,
            status: "0",
            category: "3"
          },
          {
            index: 4,
            productCode: "P004",
            name: "月嫂服务",
            image: "https://via.placeholder.com/40",
            price: 400,
            status: "1",
            category: "4"
          },
          {
            index: 5,
            productCode: "P005",
            name: "家居保洁",
            image: "https://via.placeholder.com/40",
            price: 200,
            status: "1",
            category: "1"
          }
        ];
        localStorage.setItem('productData', JSON.stringify(this.tableData));
      }
      this.total = this.tableData.length;
    },
    handleAdd() {
      this.addDialogVisible = true;
      this.addForm = {
        productCode: '',
        name: '',
        image: '',
        price: 0,
        status: '1',
        category: '1'
      };
    },
    handleImageChange(file) {
      const isImage = file.raw.type.startsWith('image/');
      if (!isImage) {
        this.$message.error('请上传图片文件');
        return;
      }
      const reader = new FileReader();
      reader.onload = (e) => {
        if (this.addDialogVisible) {
          this.addForm.image = e.target.result;
        } else {
          this.editForm.image = e.target.result;
        }
      };
      reader.readAsDataURL(file.raw);
    },
    confirmAdd() {
      if (!this.addForm.productCode || !this.addForm.name) {
        this.$message.error('请填写必填字段');
        return;
      }
      // 生成新的索引
      const newIndex = this.tableData.length > 0 ? Math.max(...this.tableData.map(item => item.index)) + 1 : 1;
      const newData = {
        index: newIndex,
        productCode: this.addForm.productCode,
        name: this.addForm.name,
        image: this.addForm.image || "https://via.placeholder.com/40",
        price: this.addForm.price,
        status: this.addForm.status,
        category: this.addForm.category
      };
      this.tableData.push(newData);
      localStorage.setItem('productData', JSON.stringify(this.tableData));
      this.addDialogVisible = false;
      this.total = this.tableData.length;
      this.$message.success('添加成功');
    },
    handleEdit(index, row) {
      this.editDialogVisible = true;
      this.editForm = { ...row, index };
    },
    confirmEdit() {
      if (!this.editForm.productCode || !this.editForm.name) {
        this.$message.error('请填写必填字段');
        return;
      }
      const index = this.editForm.index;
      const updatedData = {
        index,
        productCode: this.editForm.productCode,
        name: this.editForm.name,
        image: this.editForm.image,
        price: this.editForm.price,
        status: this.editForm.status,
        category: this.editForm.category
      };
      const idx = this.tableData.findIndex(item => item.index === index);
      if (idx !== -1) {
        this.tableData[idx] = updatedData;
        localStorage.setItem('productData', JSON.stringify(this.tableData));
        this.editDialogVisible = false;
        this.$message.success('编辑成功');
      }
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const idx = this.tableData.findIndex(item => item.index === row.index);
        if (idx !== -1) {
          this.tableData.splice(idx, 1);
          localStorage.setItem('productData', JSON.stringify(this.tableData));
          this.total = this.tableData.length;
          this.$message.success('删除成功');
        }
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    handleSearch() {
      // 模拟搜索功能
      this.$message.info('搜索功能已触发');
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  },
  mounted() {
    this.loadData();
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.pagination {
  margin-top: 20px;
  text-align: right;
>>>>>>> 76b7211 (提交)
}
</style>